<template>
  <div>
    <div class="list">
        请输入商品名称：<el-input align="left" size="small" style="width: 494px" v-model="inserForm.shoeName" placeholder="商品名称具有唯一性，同样的商品名称只能维护一个"></el-input><br><br>
        请输入货号： <el-input align="left" size="small" style="width: 200px;margin-left: 24px" v-model="inserForm.productId"></el-input>
        <el-button type="primary" size="small" @click="insertProductId">添加</el-button>
        <el-button type="primary" size="small" @click="resetForm">重置</el-button>
        <el-button type="primary" size="small" @click="getProductIdList">刷新列表</el-button>
        <el-button type="primary" size="small" @click="selectProductIdListByCriteria">查询</el-button>
    </div>
    <el-table
      :data="productAndName"
      class="tableBox"
      style="width: 100%"
      :row-style="{height:'46px'}"
      :cell-style="{padding:'0px'}">
      <el-table-column
        prop="id"
        label="货号id">
      </el-table-column>
      <el-table-column
        prop="productId"
        label="货号"
        width="140">
      </el-table-column>
      <el-table-column
        prop="shoeName"
        label="商品名称"
        width="300">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button type="text" @click="updateProductForm(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteProductForm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <!--      删除的弹窗-->
      <el-dialog title="提示" append-to-body :visible.sync="deleteProductFormVisible" width="30%" :before-close="handleClose">
        <span>确定要删除吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="deleteProductFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteProductById">确 定</el-button>
      </span>
      </el-dialog>
      <!--修改信息的弹窗-->
      <el-dialog width="40%" title="请编辑货号信息" append-to-body :visible.sync="updateProductFormVisible">
        <el-form size="medium" :model="form">
          <el-form-item label="货号id" :label-width="formLabelWidth">
            <el-input style="width: 100px" v-model="this.id" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input style="width: 460px;margin-right: 230px" v-model="form.shoeName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="货号" :label-width="formLabelWidth">
            <el-input style="width: 460px" v-model="form.productId" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateProductFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateProductById">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
export default {
  name: "ProductIdManage",
  data() {
    return {
      id: "",
      inserForm: {
        shoeName: "",
        productId: "",
      },
      productAndName: "",

      updateProductFormVisible: false,
      deleteProductFormVisible: false,
      form: {
        productId: "",
        shoeName: "",
      },
      formLabelWidth: '100px',
    }
  },
  mounted() {
    this.getProductIdList()
  },
  methods: {
    //获取所有货号列表
    getProductIdList() {
      this.axios.get("/productId/getProductIdList").then(res => {
        this.productAndName=res.data.data;
      })
    },
    //按条件查询货号列表
    selectProductIdListByCriteria(){
      this.axios.post("/productId/selectProductIdListByCriteria",{
        shoeName: this.inserForm.shoeName,
        productId: this.inserForm.productId,
      }).then(res => {
        this.productAndName=res.data.data;
      })

    },
    //点击编辑弹出操作框
    updateProductForm(row){
      this.updateProductFormVisible=true;
      this.id= row.id;
      this.form.productId=row.productId;
      this.form.shoeName=row.shoeName;
    },
    //点击删除弹出操作框
    deleteProductForm(row){
      this.deleteProductFormVisible= true;
      this.id= row.id;
    },
    //点击添加,插入新的货号信息
    insertProductId() {
      this.axios.post("/productId/insertProductId",{
        shoeName: this.inserForm.shoeName,
        productId: this.inserForm.productId,
      }).then(res => {
        alert(res.data.msg)
      })
    },
    //添加信息页面，点击重置，清空填写内容
    resetForm(){
      this.inserForm={
        shoeName: "",
        productId: "",
      }
    },

    //点击编辑的确定，请求修改信息
    updateProductById() {
      this.axios.post("/productId/updateProductById",{
        id: this.id,
        productId: this.form.productId,
        shoeName: this.form.shoeName,
      }).then(res => {
        alert(res.data.msg)
      })
    },
    //点击确定删除订单信息
    deleteProductById(){
      this.axios.post("/productId/deleteProductById",{
        id: this.id,
      }).then(res => {
        alert(res.data.msg)
        this.deleteProductFormVisible= false;
      })
    },
  }
}
</script>

<style scoped>
.list{
  padding:0;
  margin:0;
  text-align: left;
  list-style-type: none;}
</style>

